<template>
	<view class="manage">
		<view class="manage-content">
			<view class="title">{{title}}</view>
			<view class="list">
				<block v-for="item in list" :key="item.id">
					<view class="item" @click="clickFn({item})">
						<view class="item-box">
							<view class="icon">
								<u-image
									class="image" 
									width="50rpx" 
									height="50rpx" 
									:src="item.image_url"></u-image>
							</view>
							<view class="text">{{item.name}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default() {
				return []
			}
		}
	},
	methods: {
		/* 添加点击事件 */
		clickFn(e){
			this.$emit('click',e);
		},
	},
}
</script>

<style lang="scss" scoped>
.manage {
	padding: 0 25rpx;
	margin-bottom: 20rpx;
	&-content {
		width: 100%;
		// height: 348rpx;
		padding-bottom: 20rpx;
		background-color: $u-bg-white-color;
		border-radius: 12rpx;
		.title {
			display: flex;
			align-items: center;
			height: 88rpx;
			padding: 0 28rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: $u-text-color;
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 25%;
				height: 130rpx;
				&-box {
					display: flex;
					flex-direction: column;
					.icon {
						display: flex;
						justify-content: center;
						margin-bottom: 16rpx;
					}
					.text {
						font-size: 26rpx;
						color: $u-text-dark-black-color;
					}
				}
			}
		}
	}
}
</style>
